<template>
  <div class="login">
    <commhead-2 name='登录页'/>
    <van-form @submit="onSubmit">
      <div class="iphone">
        <span class="padd_5 font_18">+86</span>
        <span class="padd_5"><van-icon name="arrow-down" /></span>
        <van-field
          v-model="username"
          name="username"
          placeholder="请输入手机号"
          clearable
        />
      </div>
      <div class="iphone code">
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入收到得验证码"
          clearable
        />
        <div class="nowarp">获取验证码</div>
      </div>
      <div style="margin: 20px 20px;">
        <van-button round block  type="warning" native-type="submit" class="btn" :class="{btnchange:checked}">登录</van-button>
      </div>
    </van-form>
    <div class="chooseLogin">
      <span>账号密码登录</span>
      <span @click="toregist">手机快速注册</span>
    </div>
    <div class="footer">
      <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 20px' }">其他方式</van-divider>
      <div class="titleLogo">
        <span class=" kuan wechat"></span>
        <span class=" kuan QQ"></span>
        <span class="kuan iphone"></span>
      </div>
      <van-checkbox v-model="checked" class="see" icon-size="16px" shape='square'>
        若您输入的手机号未注册，将为您直接注册，注册即视为同意
        <span class="skybule">京东用户注册协议</span>、
        <span class="skybule">用户隐私政策</span>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { doLogin } from '_api'
import Commhead2 from '../../components/Commhead2.vue'
export default {
  data () {
    return {
      username: null,
      password: null,
      checked: false
    }
  },
  methods: {
    onSubmit (data) {
      if (!this.checked) {
        Toast('请先阅读文档')
      } else {
        doLogin({
          deviceId: '974564',
          deviceName: '小米',
          pwd: data.password,
          username: data.username
        }).then(res => {
          if (res.data.code === 0) {
            localStorage.setItem('token', res.data.data.token)
            Toast({
              type: 'success',
              message: '登录成功',
              duration: 1000,
              onClose: () => {
                this.$router.push('/home')
              }
            })
          }
          if (res.data.code === 500) {
            Toast(res.data.msg)
          }
          if (res.data.code === 600) {
            Toast({
              type: 'fail',
              message: '请输入账号密码',
              duration: 1000
            })
          }
        })
      }
    },
    toregist () {
      this.$router.push('/regist')
    }
  },
  components: { Commhead2 }
}
</script>

<style lang="scss" scoped>
.login{
  height: 100vh;
  background-color: white;
  overflow: hidden;
  .van-form{
    margin-top: 50px;
    overflow: hidden;
    .iphone{
      display: flex;
      font-size: 16px;
      align-items: center;
      margin: 10px 20px;
      border-bottom: 1px solid #ccc;
      /deep/.van-field__control{
        font-size: 16px;
      }
      .padd_5{
        padding: 0 5px;
      }
      .font_18{
        font-size: 16px;
      }
    }
    .code{
      margin-bottom: 40px;
      .nowarp{
        white-space: nowrap;
        font-size: 12px;
        color: #999;
        padding: 5px 20px;
        border-left: 1px solid #999
      }
    }
    .btn{
      opacity: .5;
    }
    .btnchange{
      opacity: .9;
    }

  }
  .chooseLogin{
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .footer{
    .titleLogo{
      margin-top: .9rem;
      display: flex;
      justify-content: center;
      .kuan{
        width: .5rem;
        height: .5rem;
        margin: 0 10px;
      }
      .wechat{
        background: url(../../assets/img/1.png);
        background-size: 100%;
      }
      .QQ{
        background: url(../../assets/img/2.png);
        background-size: 100%;
      }
      .iphone{
        background: url(../../assets/img/3.png);
        background-size: 100%;
      }
    }
    .see{
      font-size: 12px;
      padding: 15px;
      /deep/.van-checkbox__label{
        color: #999;
        .skybule{
          color: skyblue;
        }
      }
    }
  }
}
</style>
